<template>
  <div class="citys">
    <van-nav-bar
      :title="name"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-tabs v-model:active="active" animated swipeable>
      <van-tab v-for="item in cityTitle" :key="item.type" :title="item.title"
        ><ul>
          <li class="citysList" v-for="item in citysList" :key="item.id">
            <img :src="item.img" />
            <div class="cityBox">
              <p class="city_title">{{ item.title }}</p>
              <span class="city_look">
                {{ item.subtitle }}
              </span>
              <p class="citymMod">
                <span
                  v-for="(i, index) in item.mark"
                  :key="index"
                  class="citymModCon"
                  >{{ i.name }}</span
                >
              </p>
              <p class="price">￥{{ item.price }}起/人</p>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <Loading :isShow="show" />
  </div>
</template>

<script setup>
import { reqDistrict, reqPlaceFilter, reqCitysProduct } from "@/api/place";
import { useRoute } from "vue-router";
import { ref } from "vue";
import Loading from "@/components/loading.vue";
let route = useRoute();
let cityTitle = ref([]);
let active = ref(0);
let citysList = ref([]);
let show = ref(true);
const district_id = route.query.district_id;
const name = route.query.name;
const initDistrict = async () => {
  const result = await reqDistrict({ district_id });
  //   console.log(cityTitle.value);
  //   const results = await reqPlaceFilter({ district_id, type: 0 });
  //   console.log(results);
  const resArr = await reqCitysProduct({
    district_id: [district_id],
    page: 1,
    order_by: 5,
    type: 7,
  });
  if (result.code == 0 && resArr.code == 0) {
    cityTitle.value = result.data.list;
    citysList.value = resArr.data.list;
    console.log(result);
    console.log(resArr);
    show.value = false;
  }
};
initDistrict();
//返回
const onClickLeft = () => {
  history.back();
};
</script>

<style scoped>
.citys {
  padding: 15px;
  box-sizing: border-box;
}
.citysList {
  height: 365px;
  /* background-color: pink; */
  margin: 5px 0 25px 0;
}
.citysList img {
  width: 100%;
  height: 230px;
  border-radius: 4px;
  display: block;
}
.cityBox {
  height: 123px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.city_title {
  width: 100%;
  height: 20px;
  font-size: 0.3rem;
  color: #333;
  margin: 0.1rem 0;
}
.city_look {
  width: 100%;
  height: 38px;
  font-size: 0.28rem;
  color: #898989;
  margin: 0.1rem 0;
}
.citymMod {
  width: 100%;
  height: 16px;
  font-size: 0.24rem;
  color: #c14374;
  margin: 0.2rem 0;
}
.citymModCon {
  border: 1px solid #ecd3dd;
  padding: 0.06rem 0.1rem;
  margin: 0 0.1rem;
}
.price {
  width: 100%;
  height: 24px;
  font-size: 0.36rem;
  color: #c04374;
  margin: 0.1rem 0;
}
</style>
